<template>
  <view class="policy-container">
 <custom-tab-bar/>
     <view class="full-width-container">
      <JobHeader
        type="policy"
        :currentTab="currentTab"
        @on-tab-change="handleTabChange"
        @handle-search="handleSearch"
        @go-to-province="goToProvinceList"
        @city-changed="handleCityChanged"
        @city-reset="handleCityReset"
        placeholder="搜索政策"
      ></JobHeader>
    </view>
    <!-- 全屏加载状态 -->
    <u-loading-page v-if="loading && policyList.length === 0"></u-loading-page>

    <!-- 错误提示（首次） -->
    <view v-if="errorMsg && policyList.length === 0" class="error-container">
      <uni-icon type="warn" size="36" color="#ff4d4f"></uni-icon>
      <text class="error-text">{{ errorMsg }}</text>
      <button class="retry-btn" @click="reload">重试</button>
    </view>

   

    <!-- 列表区域和其他内容保持不变 -->
    <view v-if="policyList.length" class="policy-list">
     <view
       class="policy-card"
       v-for="(item) in policyList"
       :key="item.id"
       :style="{ animationDelay: `${index * 0.1}s` }"
       @click="handleCardClick(item.id)"
     >
        <view class="card-left">
          <view class="policy-title">{{ item.title }}</view>
          <view class="policy-time">
            <span>{{ item.createTime || item.time }}</span>
          </view>
        </view>
       <!-- <view class="card-right">
          <uni-icons type="right" size="16" color="#000"></uni-icons>
        </view> -->
      </view>

      <!-- 加载更多提示 -->
      <view class="load-more">
		  <u-loading-icon v-if="loadingMore"  type="circle" size="40" color="#b6ccd8"></u-loading-icon>
        <!-- <text v-if="loadingMore">加载中...</text> -->
        <text v-else-if="noMore">—— 已加载全部 ——</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="!loading && !errorMsg && policyList.length === 0" class="empty-container">
      <uni-icons type="info" size="48" color="#b6ccd8"></uni-icons>
      <text class="empty-text">暂无内容</text>
    </view>
  </view>
</template>

<script>
import JobHeader from '@/components/search.vue';
import { getselectPage } from '@/api/employmentGuidance.js'

export default {
  components: {
    JobHeader,
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      policyList: [],
      totalCount: 0,
      type: 1, // 字符串类型
      loading: false,    // 首次加载
      loadingMore: false, // 上拉加载更多
      noMore: false,     // 已加载全部
      errorMsg: '',// 错误信息
      city: '选择城市',
      currentTab: 0, // 当前选中的标签索引
    }
  },
  onLoad() {
    this.fetchPolicyList()
  },
  /* 下拉刷新（可选） */
  onPullDownRefresh() {
    this.reload().finally(() => uni.stopPullDownRefresh())
  },
  /* 上拉触底 */
  onReachBottom() {
    if (this.noMore || this.loadingMore || this.errorMsg) return
    this.pageNum += 1
    this.fetchPolicyList(true)
  },
  methods: {
    // 处理城市变化
    handleCityChanged(city) {
      this.city = city;
      this.reload();
    },
    // 处理城市重置
    handleCityReset() {
      this.city = '选择城市';
      this.reload();
    },
    // 其他方法保持不变
    /* 首次加载 / 下拉刷新 */
    reload() {
      this.pageNum = 1
      this.noMore = false
      this.errorMsg = ''
      return this.fetchPolicyList()
    },
	// 处理搜索事件（子组件触发搜索时调用）
	handleSearch(keyword) {
	  console.log('搜索关键词：', keyword);
	  this.pageNum = 1; // 重置页码
	  // this.fetchPolicyListByKeyword(keyword); 
	},
		
	// 处理城市选择事件（子组件点击城市时调用）
	goToProvinceList() {
	  // 跳转到城市列表页，传递type参数
	  uni.navigateTo({
	    url: `/pages/job/provinceList/provinceList?type=${this.type}`
	  });
	},
    /* 加载数据 */
    async fetchPolicyList(isLoadMore = false) {
      isLoadMore ? (this.loadingMore = true) : (this.loading = true)

      try {
        // 当城市为默认值时，传递空字符串
        const cityParam = this.city === '选择城市' ? '' : this.city;
        const res = await getselectPage(this.type, this.pageNum, this.pageSize, cityParam)
        if (res.code === 200) {
          const list = res.data.list || []
          this.totalCount = res.data.total

          if (isLoadMore) {
            this.policyList = this.policyList.concat(list)
          } else {
            this.policyList = list
          }

          // 判断是否到底
          this.noMore = this.policyList.length >= this.totalCount
        } else {
          this.errorMsg = res.message || '获取数据失败'
        }
      } catch (e) {
        console.error(e)
        this.errorMsg = '网络异常，请重试'
      } finally {
        this.loading = this.loadingMore = false
      }
    },
	handleCardClick(id) {
	  if (!id) {
	    console.error('ID is undefined:', id);
	    uni.showToast({
	      title: '无效的内容',
	      icon: 'none'
	    });
	    return;
	  }
	  uni.navigateTo({ url: `/pages/policy/policyDetail/policyDetail?id=${id}` });
	}
  }
}
</script>

<style scoped>
:root {
  --primary-color: #b6ccd8;
  --primary-light: #e6f0f5;
  --text-dark: #333333;
  --text-medium: #666666;
  --text-light: #999999;
  --bg-light: #f9f9f9;
  --shadow: 0 8rpx 24rpx rgba(182, 204, 216, 0.15);
}

.policy-container {
  padding: 48rpx 32rpx;
  background-color: var(--bg-light);
  min-height: 100vh;
}

/* 加载/错误/空状态 */
.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.loading-text,
.error-text,
.empty-text {
  margin-top: 24rpx;
  font-size: 30rpx;
  color: var(--primary-color);
}

.retry-btn {
  margin-top: 32rpx;
  padding: 16rpx 48rpx;
  background-color: var(--primary-color);
  color: white;
  border-radius: 30rpx;
  font-size: 28rpx;
}

/* 列表 */
.policy-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.policy-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36rpx 40rpx;
  background-color: white;
  border-radius: 24rpx;
  box-shadow: var(--shadow);
  animation: fadeInUp 0.5s forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-left {
  flex: 1;
  overflow: hidden;
}

.policy-title {
  font-size: 36rpx;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 12rpx;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.policy-time {
  font-size: 28rpx;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.policy-time uni-icon {
  margin-right: 12rpx;
}

.card-right {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 加载更多提示 */
.load-more {
  text-align: center;
  padding: 32rpx 0;
  font-size: 28rpx;
  color: var(--text-light);
}

.full-width-container{
	margin-left: 0;
	margin-right: 0;
}
</style>